<!DOCTYPE html>
<html lang="zh_CN" id="htmlRoot" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
  <meta content="webkit" name="renderer"/>
  <meta
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
    name="viewport"
  />
  <link href="/favicon.ico" rel="icon"/>
  <title><%= title %></title>
  <style>
    html, body {
      margin: 0;
    }
    .loading-wrp {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 70px;
      justify-content: center;
      height: 100vh !important;
      width: 100vw !important;
      min-height: 100vh !important;
      min-width: 100vw !important;
    }
    .loading-wrp > .title {
      width: 310px;
      height: 42px;
    }
    .loading-wrp .scaling-squares-spinner {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .scaling-squares-spinner,
    .scaling-squares-spinner * {
      box-sizing: border-box;
    }
    .scaling-squares-spinner {
      height: 65px;
      width: 65px;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      animation: scaling-squares-animation 1250ms;
      animation-iteration-count: infinite;
      transform: rotate(0deg);
    }
    .scaling-squares-spinner .square {
      height: calc(65px * 0.25 / 1.3);
      width: calc(65px * 0.25 / 1.3);
      margin-right: auto;
      margin-left: auto;
      border: calc(65px * 0.04 / 1.3) solid #43A390;
      position: absolute;
      animation-duration: 1250ms;
      animation-iteration-count: infinite;
    }
    .scaling-squares-spinner .square:nth-child(1) {
      animation-name: scaling-squares-spinner-animation-child-1;
    }

    .scaling-squares-spinner .square:nth-child(2) {
      animation-name: scaling-squares-spinner-animation-child-2;
    }

    .scaling-squares-spinner .square:nth-child(3) {
      animation-name: scaling-squares-spinner-animation-child-3;
    }

    .scaling-squares-spinner .square:nth-child(4) {
      animation-name: scaling-squares-spinner-animation-child-4;
    }

    @keyframes scaling-squares-animation {
      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    @keyframes scaling-squares-spinner-animation-child-1 {
      50% {
        transform: translate(150%, 150%) scale(2, 2);
      }
    }

    @keyframes scaling-squares-spinner-animation-child-2 {
      50% {
        transform: translate(-150%, 150%) scale(2, 2);
      }
    }

    @keyframes scaling-squares-spinner-animation-child-3 {
      50% {
        transform: translate(-150%, -150%) scale(2, 2);
      }
    }

    @keyframes scaling-squares-spinner-animation-child-4 {
      50% {
        transform: translate(150%, -150%) scale(2, 2);
      }
    }
  </style>
</head>
<body>
<div id="app">
  <div class="loading-wrp">
    <div class="scaling-squares-spinner" >
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
    <!--<%= VITE_GLOB_APP_TITLE %>-->
    <!-- <img class="title" src="./src/assets/icons/logo-black.svg"> -->
  </div>
</div>

<script>var globalThis = window;</script>
<script src="/src/main.ts" type="module"></script>
</body>
</html>
